<template>
  <el-card class="adb-install-guide" shadow="never">
    <template #header>
      <div class="card-header">
        <el-icon class="warning-icon"><Warning /></el-icon>
        <span>ADB 未安装或未配置</span>
      </div>
    </template>
    
    <div class="guide-content">
      <p class="description">
        要使用设备控制功能，需要安装 Android Debug Bridge (ADB)。
        ADB 是 Android SDK Platform Tools 的一部分，用于与 Android 设备通信。
      </p>
      
      <el-divider />
      
      <h4>安装步骤：</h4>
      
      <el-steps direction="vertical" :active="0">
        <el-step>
          <template #title>下载 Android SDK Platform Tools</template>
          <template #description>
            <div class="step-content">
              <p>从官方网站下载适合您系统的版本：</p>
              <el-button 
                type="primary" 
                size="small" 
                @click="openDownloadPage"
              >
                <el-icon><Download /></el-icon>
                打开下载页面
              </el-button>
              <p class="download-url">
                https://developer.android.com/studio/releases/platform-tools
              </p>
            </div>
          </template>
        </el-step>
        
        <el-step>
          <template #title>解压文件</template>
          <template #description>
            <p>将下载的 ZIP 文件解压到您选择的目录，例如：</p>
            <el-tag type="info">Windows: C:\android-sdk\platform-tools</el-tag>
            <el-tag type="info">macOS/Linux: ~/android-sdk/platform-tools</el-tag>
          </template>
        </el-step>
        
        <el-step>
          <template #title>添加到系统 PATH</template>
          <template #description>
            <div class="step-content">
              <el-tabs v-model="osTab">
                <el-tab-pane label="Windows" name="windows">
                  <ol>
                    <li>打开"系统属性" → "高级" → "环境变量"</li>
                    <li>在"系统变量"中找到 PATH</li>
                    <li>添加 platform-tools 目录路径</li>
                    <li>确定保存所有更改</li>
                  </ol>
                </el-tab-pane>
                <el-tab-pane label="macOS/Linux" name="unix">
                  <ol>
                    <li>编辑 ~/.bashrc 或 ~/.zshrc 文件</li>
                    <li>添加: export PATH=$PATH:~/android-sdk/platform-tools</li>
                    <li>运行: source ~/.bashrc 或 source ~/.zshrc</li>
                  </ol>
                </el-tab-pane>
              </el-tabs>
            </div>
          </template>
        </el-step>
        
        <el-step>
          <template #title>验证安装</template>
          <template #description>
            <p>打开终端/命令提示符，运行：</p>
            <el-tag type="success">adb version</el-tag>
            <p>如果显示版本信息，说明安装成功</p>
          </template>
        </el-step>
        
        <el-step>
          <template #title>重启应用</template>
          <template #description>
            <p>关闭并重新打开 SocialMatrix Pro 以使用设备控制功能</p>
            <el-button 
              type="primary" 
              size="small" 
              @click="restartApp"
            >
              <el-icon><RefreshRight /></el-icon>
              重启应用
            </el-button>
          </template>
        </el-step>
      </el-steps>
      
      <el-divider />
      
      <el-alert 
        title="提示" 
        type="info" 
        :closable="false"
      >
        <template #default>
          <ul class="tips-list">
            <li>确保您的 Android 设备已启用"开发者选项"和"USB 调试"</li>
            <li>首次连接时，设备上会弹出授权提示，请点击"允许"</li>
            <li>如果使用 USB 连接，请确保安装了设备驱动程序</li>
          </ul>
        </template>
      </el-alert>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Warning, Download, RefreshRight } from '@element-plus/icons-vue'
import { invoke } from '@tauri-apps/api/core'

const osTab = ref(navigator.platform.includes('Win') ? 'windows' : 'unix')

const openDownloadPage = async() => {
  try {
    await invoke('open_url', { 
      url: 'https://developer.android.com/studio/releases/platform-tools' 
    })
  } catch (error) {
    ElMessage.error('无法打开下载页面，请手动访问链接')
  }
}

const restartApp = async() => {
  try {
    // 可以实现应用重启逻辑
    ElMessage.info('请手动重启应用')
  } catch (error) {
    ElMessage.error('重启失败，请手动重启应用')
  }
}
</script>

<style lang="scss" scoped>
.adb-install-guide {
  max-width: 800px;
  margin: 20px auto;
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    
    .warning-icon {
      font-size: 20px;
      color: var(--el-color-warning);
    }
  }
  
  .guide-content {
    .description {
      color: var(--el-text-color-regular);
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    h4 {
      margin: 20px 0 15px;
      color: var(--el-text-color-primary);
    }
    
    .step-content {
      p {
        margin: 10px 0;
      }
      
      .download-url {
        font-size: 12px;
        color: var(--el-text-color-secondary);
        margin-top: 5px;
        word-break: break-all;
      }
    }
    
    .el-tag {
      margin: 5px 5px 5px 0;
    }
    
    .el-tabs {
      margin-top: 10px;
      
      ol {
        margin: 10px 0;
        padding-left: 20px;
        
        li {
          margin: 5px 0;
          color: var(--el-text-color-regular);
        }
      }
    }
    
    .tips-list {
      margin: 0;
      padding-left: 20px;
      
      li {
        margin: 5px 0;
        color: var(--el-text-color-regular);
      }
    }
  }
}
</style>